<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>员工首页</title>
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="css/employee.css">
</head>

<style>
table{
  text-align: center;
  margin: 0px auto;
  border-collapse: collapse;
  width: 100%;
  
}
th,
tr{
  border: 1px solid #dcdcdc;
}



</style>


<body>
  <!-- 返回首页 -->
  <div style="text-align: center;"><a href="./index.html">返回首页</a></div>
  <!-- 等待时的遮罩 -->
  <div id="waitDialog">
    <div>等待中，请稍后...</div>
  </div>
  <!-- 添加和查询的部分 -->
  <div style="text-align: center;">
    <select id="selQDept"></select>
    <input type="text" id="txtQName" placeholder="姓名模糊查询">
    <input type="text" id="txtQPhone" placeholder="电话模糊查询">
    <button id="tbnQuery" class="button">查询</button>
    <button id="btnReset" class="button">重置</button>

    <button id="btnAdd" class="button">添加</button>
  </div>
<br>

  <!-- 数据表格 -->
  <table >
    <thead>
      <tr>
        <th>所属部门</th>
        <th>姓名</th>
        <th>电话</th>
        <th>修改时间</th>
        <th>功能</th>
      </tr>
    </thead>
    <tbody id="tbData"></tbody>
  </table>

<br>
  <!-- 分页的部分 -->
  <div class="tc">
    <button id="spPre" class="pager button">上一页</button>
    <span id="spPage"></span>
    <button id="spNext" class="pager button">下一页</button> 
  </div>


  <!-- 添加的弹出对话框 -->
  <div id="divAddDigLog">
    <div>
      <div>添加员工</div>
      <div>
        <!-- 部门是下拉选择 -->
        <select id="selDept"></select>
      </div>
      <div>
        <input type="text" id="txtName" placeholder="姓名">
      </div>
      <div>
        <input type="text" id="txtPhone" placeholder="电话">
      </div>
      <div>
        <button id="btnAddEmp">添加</button>
        <button id="btnClassAdd">关闭</button>
      </div>
    </div>
  </div>

  <!-- 修改的表单和对话框 -->
  <div id="divModifyDialog">
    <div>
      <div style="text-align: center;">修改信息</div>
      <div>
        <select id="selMDept"></select>
      </div>
      <div>
        <input type="text" id="txtMName" placeholder="姓名">
      </div>
      <div>
        <input type="text" id="txtMPhone" placeholder="电话">
      </div>
      <div style="text-align: center;" >
        <button id="btnSavaEmp" >修改</button>
        <button id="btncloseModify" >关闭</button>
      </div>
    </div>
  </div>



  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/spark-md5/3.0.0/spark-md5.min.js"></script>
  <!-- 通用js -->
  <script src="js/server.js"></script>

  <script src="js/employee.js"></script>
</body>

</html>